<template>
  <div class="contn">
    <div class="hder">
      <span class="lef icons4" onclick="history.back()"></span>
      <span  class="cent">登录</span>
      <router-link to="/zhuCe" class="rig">注册</router-link>
    </div>
    <div class="main backColo">
      <fromItem></fromItem>
      <a class="submit-but submit-font butBorder magT20" @click="getLogin()">登录111</a>
      <p class="pwd magT20">密码登录</p>
      <div class="qq">
        <p>使用以下账号可免注册</p>
        <span class="icons1"></span>
      </div>
    </div>
    <div :class="{dialog:flags}">
      <div class="dialog-bd">
        <h4>请输入图片验证码</h4>
        <div class="item">
          <input type="text" placeholder="请输入验证码">
          <span class="tc num">7923</span>
        </div>
      </div>
      <div class="dialog-ft">
        <button @click="close">取消</button><button @click="affirm()">确认</button>
      </div>
    </div>
    <!--<p class="shade"></p>-->
  </div>
</template>
<script>
import  fromItem from "./form.vue"
export default {
  data(){
    return{
      num:60,
      msg:''
    }
  },
  components:{
    fromItem
  },
  computed:{
      flags(){
        return this.$store.state.flags;
      }

  },
  methods:{
      getLogin(){
          this.$store.state.numb
           console.log( this.$store.state.numb)
          this.$router.push({name:"Mine"})
      },
      close(){

        this.$store.commit("flagCh");
      },
      affirm(){
        this.$store.commit("num");
        this.$store.commit("flagCh");
        this.$store.commit("boolChange");
//        let timeId = setInterval(() => {
//                this.num--;
//                if (this.num==0) {
//                    clearInterval(timeId)
//                }
//                console.log(this.num)
//            },1000)
      }
  }
}
</script>
<style scoped>
  .backColo{
  background: #f0f0f0;
  }
  .backwhite{
  background: white;
  }
  .main{
    padding: .35rem .2rem 0 .2rem;
    min-height: 100%;
  }

  .butBorder{
  border:0;
  text-align: center;
  vertical-align: middle;
  outline:none;
  }

  .submit-but{
  width: 100%;
  height: .5rem;
  background: -webkit-linear-gradient(top,#ff7c20,#ff7900);
  border-radius: .05rem;
  line-height: .5rem;
  }
  .submit-font{
  color: white;
  font-size: .18rem;
  }

  .hder{
  height: .44rem;
  line-height: .44rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .1rem;
  }
  .hder .lef{
  background-position: -213px -352px;
  display: inline-block;
  width: .28rem;
  height: .28rem;
  /*vertical-align:middle;*/
  }
  .hder .cent{
  font-size: .18rem;
  }
  .hder .rig{
  font-size: .14rem;
  }


  .contn{
    min-height: 100%;
    box-sizing: border-box;
    height: 100vh;
  }
  .pwd{
    font-size: .13rem;
    height: 1rem;
  }
  .qq{
    text-align: center;

  }
  .qq span{
    width: .45rem;
    height: .45rem;
    background-position: -286px 0;
    margin-top: .1rem;
  }

  .dialog{
    width: 2.7rem;
    /*height: 1.76rem;border:1px solid red;*/
    border-radius: 6px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    pointer-events: auto;
    /*background-color: rgba(253,253,253,.95);*/
    /*position: relative;*/
    font-size: 16px;
    background: #f8f8f8;
    margin-bottom: .9rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .dialog .dialog-bd{
    min-height: 71px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 18px;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;

  }
  .dialog-bd>h4{
    margin-bottom: 4px;
    width: 100%;
    text-align: center;
    font-weight: normal;
  }
  .dialog-bd .item{
    background: white;
    height: .5rem;
    margin-top: .2rem;
    padding: 0 .1rem;
    line-height: .5rem;
  }
  .dialog-bd .item input{
    border: 0;
    outline:none;
    font-size: .14rem;
    color:#333;
    font-weight: 700;
    width: 1.2rem;
  }
  input::-webkit-input-placeholder{ color:#bbb; font-weight: 700; font-size: .12rem;}
  input:-moz-placeholder{ color:#bbb;}
  input::-moz-placeholder{ color:#bbb;}
  input:-ms-input-placeholder{ color:#bbb;}
  .num {
    display: inline-block;
    width:.8rem;
    color:pink;
    font-size: .19rem;
  }
  .dialog-ft{
    height: 42px;
    line-height: 42px;
    width: 100%;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-sizing: border-box;
  }
  .dialog-ft button{
    width: 50%;
    border: 0;
    height: 100%;
    box-sizing: border-box;
    color: #ff6900;
    font-size: .16rem;
    background: #f8f8f8;
    outline:none;
  }
  /*.shade{*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*background: rgba(0,0,0,.3);*/
    /*position: absolute;*/
    /*left:0;*/
    /*top:0;*/
  /*}*/
</style>
